<template>
  <view class="content">
	  <view class="box"> 
    <view class="address-item" v-for="(item, index) in addressList" :key="index">
      <view class="name-phone">
        <text class="name">{{ item.name }}</text>
        <text class="phone">{{ item.phone }}</text>
      </view>
      <view class="address-detail">
        <text>{{ item.province }} {{ item.city }} {{ item.district }} {{ item.detail }}</text>
      </view>
      <image class="edit-icon" src="/static/tab/edit.png" mode="widthFix" @click="goEdit(item)"></image>
    </view>
    <view class="btn-group">
      <button class="manage-btn" @click="handleManage">管理</button>
      <button class="add-btn" @click="BackAddress">+ 添加收货地址</button>
    </view>
  </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      addressList: [
        {
          name: "吴宇超",
          phone: "15874131475",
          province: "湖南省",
          city: "长沙市",
          district: "望城区",
          detail: "雷锋街道枫林三路1576号益丰大药房"
        },
        {
          name: "刘庆林",
          phone: "15292079021",
          province: "湖南省",
          city: "长沙市",
          district: "岳麓区",
          detail: "麓谷街道金洲大道68号湖南益丰医药有限公司"
        }
      ]
    };
  },
  methods: {
    BackAddress() {
      uni.navigateTo({
        url: "/pages/BaAddre/BaAddre"
      });
    },
    goEdit(item) {
      uni.navigateTo({
        url: `/pages/address/addAddress.vue?name=${item.name}&phone=${item.phone}&province=${item.province}&city=${item.city}&district=${item.district}&detail=${item.detail}`
      });
    },
    handleManage() {
      // 可实现管理逻辑，比如批量删除等，这里简单提示
      uni.showToast({
        title: "管理功能待实现",
        icon: "none"
      });
    }
  }
};
</script>

<style scoped >
.address-list-container {
  padding: 10upx;
}
.address-item {
  background-color: #fff;
  margin-bottom: 20upx;
  padding: 20upx;
  border-radius: 10upx;
  display: flex;
  flex-direction: column;
}
.name {
  font-size: 32upx;
  font-weight: bold;
  margin-bottom: 10upx;
  display: inline-block;
  justify-content: space-between;
  align-items: center;
}
.phone{
	font-size: 32upx;
	margin-bottom: 10upx;
	margin-left: 20upx;
	display: inline-block;
	justify-content: space-between;
	align-items: center;
}
.address-detail {
  font-size: 28upx;
  color: #666;
  width: 500upx;
  display: flex;
}
.edit-icon {
  width: 40upx;
  height: 40upx;
  
  position: relative;
  transform: translateY(-80upx) translateX(550upx);
}
.btn-group {
  display: flex;
  justify-content: space-between;
  margin-top: 500upx;
  background: #fff;
  border-radius: 30upx;
  height: 200upx;
  
}
.manage-btn {
  background-color: #f5f5f5;
  color: #333;
  border-radius: 30upx;
  height: 100upx;
  
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.add-btn {
  background-color: #10110f;
  color: #fff;
  border-radius: 40upx;
  height: 100upx;
  
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
.box {
	width: 670upx;
	height: 136upx;
	/* overflow:hidden; */
	margin-top: 12px;
	margin-bottom: 1100upx;
}

.content {

	background: #f7f7f7;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
</style>